<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex__container {
            display: flex;
            flex-wrap: wrap;
        }

        .flex__item {
            flex: 0 1 calc((100vw - 18vh) / 4);
            /* calc(100vw -18vh) / 4 是flex-basis的基准值 */
        }

        /* .flex__item {
            flex: 0 0 400px;
        } */
        /* 这个时候，当Flex容器没有足够空间时，Flex项目会按 flex-basis: 400px 计算其宽度，Flex容器没有足够空间时，Flex就会断行： */
        /* .flex__item {
            flex: 1 0 400px;
        } */

        /* 当Flex容器没有足够空间排列Flex项目时，Flex项目会按 flex-basis:
         400px 计算其宽度，Flex会断行，并且同一行出现剩余空间时，Flex项目会扩展，占满整个Flex容器： */
        .item {
            background-color: turquoise;
            /* height: 40px;
            width: 200px; */
        }

        .width100 {
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="flex__container">
        <!-- <div class="flex__item item">
            <div class="width100">1</div>
        </div>
        <div class="flex__item item">
            <div class="width100">2</div>
        </div>
        <div class="flex__item item">
            <div class="width100">3</div>
        </div>
        <div class="flex__item item">
            <div class="width100">4</div>
        </div> -->
        <div class="flex__item item">
            1
        </div>
        <div class="flex__item item">2</div>
        <div class="flex__item item">3</div>
        <div class="flex__item item">4</div>
    </div>
</body>

</html>